<template>
  <view
    class="gradient-tag font-songti"
    :class="{ active: active, 'gradient-tag-mini': size, 'gradient-tag-border': border }"
  >
    <slot></slot>
  </view>
</template>

<script>
  export default {
    props: {
      active: {
        type: Boolean,
        default: false,
      },
      size: {
        type: String,
        default: "", // mini
      },
      border: {
        type: Boolean,
        default: true,
      },
    },
  };
</script>

<style lang="scss" scoped>
  .gradient-tag {
    position: relative;
    width: 200rpx;
    height: 50rpx;
    line-height: 50rpx;
    text-align: center;
    font-size: 24rpx;
    color: #8a8a8a;

    //渐变背景
    background: linear-gradient(
      94deg,
      rgba(255, 255, 255, 0) 0%,
      #fff 50%,
      rgba(255, 255, 255, 0) 100%
    );
    &-border {
      &::before,
      &::after {
        content: "";
        display: block;
        height: 2rpx;
        position: absolute;
        left: 0;
        right: 0;
        background: linear-gradient(
          94deg,
          rgba(255, 255, 255, 0) 0%,
          #8a8a8a 50%,
          rgba(255, 255, 255, 0) 100%
        );
      }

      &::before {
        top: 0;
      }

      &::after {
        bottom: 0;
      }
    }

    &-mini {
      width: auto;
      height: 32rpx;
      line-height: 32rpx;
      padding-left: 10rpx;
      padding-right: 10rpx;
      font-size: 18rpx !important;
      * {
        font-size: 18rpx !important;
      }
    }

    &.active {
      color: #28bb23;
      &::before,
      &::after {
        background: linear-gradient(
          94deg,
          rgba(255, 255, 255, 0) 0%,
          #28bb23 50%,
          rgba(255, 255, 255, 0) 100%
        );
      }
    }
  }
</style>
